<template>
  <div>响应式计数器：{{ $store.state.counter }}</div>
  <div>非响应式计数器：{{counter1}}</div>
  <div><button @click="increment">点击我</button></div>
  <div><button @click="getData">获取数据</button></div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'
import http from '../api/request'
// 将所有的type放进 types.d.ts 文件中，方便后续统一管理，并且易于后期维护
import { Todo } from '../types'

export default defineComponent({
  name: 'Home',
  setup () {
    const store = useStore(key)
    // 这样是为了使得counter成为响应式
    const counter = computed(() => store.state.counter)
    // 这样就不会是响应式的
    const counter1 = store.state.counter
    const increment = () => {
      store.dispatch('addCounter', 1)
    }

    const getData = () => {
      // 这里需要指定类型
      // 指定返回的数据类型为 Todo
      http.get<Todo>('/todos/1')
        .then((res: any) => {
          console.log(res)
        })
    }
    return {
      counter,
      counter1,
      increment,
      getData
    }
  }
})
</script>

<style>

</style>